/* Tooltip container */
.tooltip {
    display: inline-block;
    position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
    position: absolute;
    background-color: black;
    max-width: 400px;
    width: 90vw;
    margin: auto;
    padding: 11px;
    padding-top: 32px;
    border-radius: 6px;
    color: #fff;
    font-size: 110%;
    text-align: left;
    /*z-index: 1;*/
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.33s, opacity 0.33s linear;
    white-space: normal;
}

/* Show the tooltip text when the mouse is hovering over the tooltip container */
.tooltip .tooltiptext.show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.tooltip .material-icons {
    font-size: 20px;
}

.tooltip-icon {
    cursor: pointer;
}

.tooltip .tooltiptext.lock {
    visibility: visible !important;
    opacity: 1;
    transition-delay: 0s;
}

.pin {
  position:absolute;
  z-index:101;
  cursor: pointer;
  top: 0px;
  right: 0;
}

.pin .mat-icon{
  margin:8px 8px 0;
}

.pin-icon {
    width: 18px;
    height: auto;
}

#tooltip-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align:right;
    padding:0 12px;
    border-radius: 6px 6px 0 0;
    z-index: 99;
}

#tooltip-header:hover {
    cursor: grab;
}

.tooltip-header-text {
  position:absolute;
  width:calc(100% - 48px);
  top:8px;
  font-weight:500;
  text-align:left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* speech bubble styles */
div.tooltiptext{
  background-color: var(--primary) !important;
  color: var(--primary-txt) !important;
  
  padding: 40px 16px 6px;
  z-index:100;
}

div.tooltiptext:before{
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height:20px;
  z-index: 99;
  transform: rotate( 45deg );
  -moz-transform:    rotate( 45deg );
  -ms-transform:     rotate( 45deg );
  -o-transform:      rotate( 45deg );
  -webkit-transform: rotate( 45deg );

  background-color: var(--primary);

}

div.tooltiptext.left{
  top:-42px !important;
  right:42px !important;
  min-height:64px;
}

div.tooltiptext.right{
  top:-42px !important;
  left:42px !important;
  min-height:64px;
}

div.tooltiptext.above{
  bottom:42px !important;
  left:-42px !important;
  min-height:64px;
}

div.tooltiptext.below{
  top:16px !important;
  left:-42px !important;
  min-height:64px;
}

/* Special classes for slide-in form */
div.tooltiptext.center{
  top: 25px !important;
  left: -65px !important;
  min-height: 64px;
  max-width: 275px !important;
}

div.tooltiptext.center-left{
  top: 25px !important;
  left: -200px !important;
  min-height: 64px;
  max-width: 275px !important;
}
/* -- end -- */

/* Arrow */
div.tooltiptext.above:before{
  bottom: -8px;
  left: 42px; /*calc(50% - 10px);*/
}

div.tooltiptext.below:before{
  top: -8px;
  left: 42px; /*calc(50% - 10px);*/
}

div.tooltiptext.left:before{
  top: calc(32px - 10px);
  right: -8px;
}

div.tooltiptext.right:before{
  top: calc(32px - 10px);
  left: -8px;
}

/* Special classes for slide-in form */
div.tooltiptext.center:before{
  top: -8px;
  left: 62px; /*calc(50% - 10px);*/
}

div.tooltiptext.center-left:before{
  top: -8px;
  right: 57px; /*calc(50% - 10px);*/
}
/* -- end -- */

.moved div.tooltiptext:before{
  display:none;
}

.tooltip-container{
  position:relative;
  filter: drop-shadow(0 4px 4px rgba(0,0,0, 0.5));
  z-index:100;
}

.tooltip-container.wizard{
  position:fixed;
}


